import React, {Component} from 'react';
import starStyles from './star.less';

class Star extends Component {
  constructor(props, context) {
    super(props);
    this.number = props.number;
  }

  componentDidMount(){

  }

  componentWillReceiveProps(nextProps, nextContext) {

  }


  componentWillUnmount(){

  }

  randomNumber = (lower, upper) => {
    return Math.floor(Math.random() * (upper - lower+1)) + lower;
  }

  renderStar=()=>{
    const stars = [];
    for(let i = 0; i < this.number; i +=1){
      stars.push(i)
    }
    return stars.map(item=>{
      const position = this.randomNumber(1, 80);
      const time = this.randomNumber(2, 5);
      const delay = this.randomNumber(0, 2);
      const animation = `${starStyles[`star${position}`]} ${time}s ease-in ${delay}s infinite`;
      return <span className={starStyles.star} key={item} style={{animation}} />
    })
  }




  render() {

    return (
      <div className={starStyles.starMain}>
        {this.renderStar()}
      </div>
    )
  }
}
export default Star;
